<template>

  <div id="index">

    <el-container>
        <el-main style="margin-top: -25px;">
          <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark">
              <div class="index_box_title">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item>数据中心</el-breadcrumb-item>
                </el-breadcrumb>
                </div>
              </div>
          </el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">
              <div class="index_box_data1" >
                <span class="index_box_data1_text">成交金额</span>
                <i class="el-icon-s-claim" ></i>
                <div class="index_box_data1_number">6000.00元</div>
              </div>
      
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">
              <div class="index_box_data1" >
                <span class="index_box_data1_text">商品数量</span>
                <i class="el-icon-s-claim" ></i>
                <div class="index_box_data1_number">62512件</div>
              </div>
      
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">
              <div class="index_box_data1" >
                <span class="index_box_data1_text">会员人数</span>
                <i class="el-icon-s-claim" ></i>
                <div class="index_box_data1_number">62524人</div>
              </div>
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">
              <div class="index_box_data1">
                <span class="index_box_data1_text">订单数量</span>
                <i class="el-icon-s-claim" ></i>
                <div class="index_box_data1_number">845975笔</div>
              </div>
            </div></el-col>
          </el-row>

          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple">
              <div class="index_box_form_a">
                <div class="index_box_form_progress">
                  <span style="font-size: 20px;">商品类型销售量</span>
                  <div class="form_progress" style="margin-top: 10px;">
                              <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                    prop="name"
                    label="名称"
                   >
                  </el-table-column>
                    <el-table-column
                     prop="type"
                    label="类型">
                    <template slot-scope="scope">
                      <el-tag type="success">牛奶</el-tag>
                    </template>
                  </el-table-column>
                    <el-table-column
                      prop="date"
                      label="日期"
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="volume"
                      label="销售量">
                    </el-table-column>
                    <el-table-column
                    prop="money"
                    label="销售金额">
                  </el-table-column>
    
        </el-table>
                    </div>
                </div>
              </div>
            </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">
              <div class="index_box_form_a">
                <div class="index_box_form_progress">
                  <span style="font-size: 20px;">顾客购买金额情况展示</span>
                  <div class="form_progress" style="margin-top: 10px;">
                    <!-- <el-calendar :range="['2021-11-01', '2021-11-07']" >
                    </el-calendar>
                     -->
                     <el-table
                     :data="UData"
                     style="width: 100%">
                     <el-table-column
                     prop="name"
                     label="昵称"
                    >
                   </el-table-column>
                     <el-table-column
                      prop="email"
                     label="email"
                     width="180"
                     >
                   </el-table-column>
                     <el-table-column
                     prop="date"
                     label="商品名称">
                     <template slot-scope="scope">
                      <el-tag type="success">牛奶</el-tag>
                    </template>
                   </el-table-column>
                     <el-table-column
                     prop="money"
                     label="购买金额">
                   </el-table-column>
                 </el-table>
                    </div>
                </div>
            </div>
            </div></el-col>
          </el-row>

        <el-row :gutter="24">
          <el-col :span="9"><div class="grid-content bg-purple">
            <div class="index_box_form_a">
              <div class="index_box_form_progress">
                <span style="font-size: 20px;">顾客最新异常表</span>
                <div class="form_progress" style="margin-top: 10px;">
                  <el-collapse v-model="activeNames" @change="handleChange">
                    <el-collapse-item title="登录异常" name="1">
                      <div>用户昵称：小雨饼干</div>
                      <div>登录时间：2021-12-12 25:52</div>
                      <div>用户邮箱：2831115044@qq.com</div>
                      <div style="color: rgb(122, 38, 4);">异常原因：密码输入超过五次,账号被锁定。</div>
                      <div style="color: rgb(12, 88, 2);">解决方案：登录界面重新修改面</div>
                    </el-collapse-item>

                    <el-collapse-item title="登录异常" name="2">
                      <div>用户昵称：小雨饼干</div>
                      <div>登录时间：2021-12-12 25:52</div>
                      <div>用户邮箱：2831115044@qq.com</div>
                      <div style="color: rgb(122, 38, 4);">异常原因：密码输入超过五次,账号被锁定。</div>
                      <div style="color: rgb(12, 88, 2);">解决方案：登录界面重新修改面</div>
                    </el-collapse-item>

                    <el-collapse-item title="登录异常" name="3">
                      <div>用户昵称：小雨饼干</div>
                      <div>登录时间：2021-12-12 25:52</div>
                      <div style="color: rgb(122, 38, 4);">异常原因：密码输入超过五次,账号被锁定。</div>
                      <div style="color: rgb(12, 88, 2);">解决方案：登录界面重新修改面</div>
                    </el-collapse-item>
                    <el-collapse-item title="登录异常" name="4">
                      <div>用户昵称：小雨饼干</div>
                      <div>登录时间：2021-12-12 25:52</div>
                      <div style="color: rgb(122, 38, 4);">异常原因：密码输入超过五次,账号被锁定。</div>
                      <div style="color: rgb(12, 88, 2);">解决方案：登录界面重新修改面</div>
                    </el-collapse-item>
                    <el-collapse-item title="登录异常" name="5">
                      <div>用户昵称：小雨饼干</div>
                      <div>登录时间：2021-12-12 25:52</div>
                      <div style="color: rgb(122, 38, 4);">异常原因：密码输入超过五次,账号被锁定。</div>
                      <div style="color: rgb(12, 88, 2);">解决方案：登录界面重新修改面</div>
                    </el-collapse-item>
                    <el-collapse-item title="登录异常" name="6">
                      <div>用户昵称：小雨饼干</div>
                      <div>登录时间：2021-12-12 25:52</div>
                      <div style="color: rgb(122, 38, 4);">异常原因：密码输入超过五次,账号被锁定。</div>
                      <div style="color: rgb(12, 88, 2);">解决方案：登录界面重新修改面</div>
                    </el-collapse-item>
                    <el-collapse-item title="登录异常" name="7">
                      <div>用户昵称：小雨饼干</div>
                      <div>登录时间：2021-12-12 25:52</div>
                      <div style="color: rgb(122, 38, 4);">异常原因：密码输入超过五次,账号被锁定。</div>
                      <div style="color: rgb(12, 88, 2);">解决方案：登录界面重新修改面</div>
                    </el-collapse-item>
                  
                  </el-collapse>
          </div>
        </div>
      </div>
          </div></el-col>
          <el-col :span="15" style="margin-left:0px;margin-right: 0px;"><div class="grid-content bg-purple">
            <div class="index_box_form_a">
              <div class="index_box_form_progress">
                <span style="font-size: 20px;">顾客购买金额情况展示</span>
                <div class="form_progress" style="margin-top: 10px;">
                  <el-calendar v-model="value">
                  </el-calendar>
          </div>
        </div>
      </div>
    </div>
        </el-col>

        </el-row>

        </el-main>
      </el-container>
    </el-container>
  </div>


</div>



 
</template>


<script>
export default {
  methods: {
      handleClick(row) {
        console.log(row);
      }
    },
    data() {
      
      return {
        activeNames: ['1','2'],
        count: 0,
        activeIndex: '1',
        activeIndex2: '1',
        percentage: 20,
        tableData: [{
             name: '牛奶',
             type: '饮料',
             date: '2021-09-22',
             volume: '25616',
             money: '12500.00',
          },{
             name: '牛奶',
             type: '饮料',
             date: '2021-09-22',
             volume: '25616',
             money: '12500.00',
          },{
             name: '牛奶',
             type: '饮料',
             date: '2021-09-22',
             volume: '25616',
             money: '12500.00',
          },
          {
             name: '牛奶',
             type: '饮料',
             date: '2021-09-22',
             volume: '25616',
             money: '12500.00',
          }
        ],
        UData:[{
             name: '风格子',
             email: '2831115044@qq.com',
             volume: '25616',
             money: '12500.00',
          },{
             name: '风格子',
             email: '2831115044@qq.com',
             volume: '25616',
             money: '12500.00',
          },
          {
             name: '风格子',
             email: '2831115044@qq.com',
             volume: '25616',
             money: '12500.00',
          },
          {
             name: '风格子',
             email: '2831115044@qq.com',
             volume: '25616',
             money: '12500.00',
          },
        
        ]
      };
      
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      load () {
        this.count += 2
      },
      handleChange(val) {
        console.log(val);
      }
  }
  
</script>

<style scoped>
.el-row {
    margin-bottom: 10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #fff;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #ffff;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #fff;
  }

  .userimg
  {
    height:100px;
  }
  .userimg img
  {
    width: 75px;
    text-align: center;
    height:75px;
    border-radius: 50%;
  }
  
  .el-header, .el-footer {
    color: #333;
    /* text-align: center; */
    line-height: 40px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    background: #2D3F51;

    /* line-height: 200px; */
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-row {
     margin-bottom: 20px; 
    
  }
  .el-col {
    border-radius: 4px;
  }
  /* .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  } */
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
body
  {
    margin:0px;
    background-color: #EBEEF5;
    
  }

  .top
  {
    width:100%;
    height:45px;
    background-color: #00a65a;
  }
  .index
  {
    width: 100%;
    height: 100%;
  }
.leftNav
{
    width: 200px;
    height:100%;
    position:absolute;
    background: #2D3F51;
}

.leftNav-box
{
    width: 200px;
    height:100%;
    position:absolute;
    background: #2D3F51;
}
.mind-top-menu
{
  margin-left: 200px;
}
.leftNav-title
{

  height:40px;
  text-align: center;
  font-size: 28px;
  margin-left: 10px;
  line-height: 45px;
  letter-spacing:8px;
  font-family:"楷体","楷体_GB2312";;
}

.user_box
{
  margin-top: 20px;
  height: 100px;
  color: #fff;
  text-align: center;
}

.user_img img
{
   width:72px;
   height:72px;
   border-radius: 50%;
}

.index_box
{
  width: 100%;
  position:absolute;
  
}
.index_box_title
{
  width:100%;
  background-color: #fff;
  box-shadow: 0 0 0 1px rgb(223, 217, 217);
  border-radius: 5px;
  color: #4f5351;
  padding: 10px 0px 10px 10px;
  cursor:pointer;
}
、
.index_box_form
{
  margin-top: 10px;
  border-radius: 5px;
  width:500px;
}
.index_box_data1
{
  width:80%;
  background-color:#fff;
  border-radius: 10px;
  margin-right: 35px;
  float: left;
  cursor:pointer;
  padding: 20px;

}
.index_box_data1_text
{
  font-size: 15px;
  color: rgb(66, 65, 65);

}
.index_box_data1_number
{
  margin-top: 10px;
  font-size: 25px;
  color: rgb(44, 172, 65);
}
.index_box_data1 i
{
  margin-left: 50px;
  font-size: 40px;
  color: rgb(19, 204, 96);
}
.index_box_form_progress
{
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  width: 90%;
  height:400
}
.index_box_a
{
  margin-left:200px;
  padding-left: 15px;
  padding-right: 10px;
}
</style>
